<!--订单列表-->
<template>
  <div class="main_box">
    <Tabs :tabList="tabList">
      <template slot="tabs">
        <Tools>
          <template slot="forms">
            <ToolsForm />
          </template>
        </Tools>
        <Action>
          <template slot="actions">
            <el-dropdown trigger="click">
              <el-button type="danger" size="small" plain>
                统一操作<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="item in talkType" :key="item.value">{{
                  item.name
                }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button type="primary" size="small" @click="autoRules"
              >自动剔除字符规则</el-button
            >
          </template>
        </Action>
        <div class="table_box">
          <el-table :data="tableData" border style="width: 100%" ref="table">
            <el-table-column type="selection" width="60"> </el-table-column>
            <el-table-column type="index" label="序号" width="60">
            </el-table-column>
            <el-table-column label="留言内容" width="160">
              <template slot-scope="scope">
                <span class="blue_clr">
                  {{ scope.row.test }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="出发地">
              <template slot-scope="scope">
                {{ scope.row.test }}
              </template>
            </el-table-column>
            <el-table-column label="目的地">
              <template slot-scope="scope">
                {{ scope.row.test }}
              </template>
            </el-table-column>
            <el-table-column label="货物名称">
              <template slot-scope="scope">
                {{ scope.row.test }}
              </template>
            </el-table-column>
            <el-table-column label="所需">
              <template slot-scope="scope">
                {{ scope.row.test }}
              </template>
            </el-table-column>
            <el-table-column label="电话">
              <template slot-scope="scope">
                {{ scope.row.test }}
              </template>
            </el-table-column>
            <el-table-column label="摘要">
              <template slot-scope="scope">
                {{ scope.row.test }}
              </template>
            </el-table-column>
            <el-table-column label="发布时间" width="160">
              <template slot-scope="scope">
                {{ scope.row.test }}
              </template>
            </el-table-column>
            <el-table-column label="客户微信昵称/备注ID">
              <template slot-scope="scope">
                {{ scope.row.test }}
              </template>
            </el-table-column>
            <el-table-column label="我方微信">
              <template slot-scope="scope">
                {{ scope.row.test }}
              </template>
            </el-table-column>
            <el-table-column label="所在群名称">
              <template slot-scope="scope">
                {{ scope.row.test }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <Page />
      </template>
    </Tabs>
    <Dialog title="自动剔除字符规则" width="600px" :isShow.sync="isShow">
      <template slot="content">
        <el-form :model="ruleForm" label-width="90px" size="small">
          <el-form-item
            v-for="(item, index) in ruleForm.ruleList"
            :key="index"
            :label="'规则' + (index + 1)"
          >
            <el-input placeholder="请输入规则字段名称" style="width: 80%" />
            <div class="group">
              <i
                @click="delItem"
                v-if="index != 0"
                class="el-icon-delete el-icon"
              ></i>
              <i
                @click="plusItem"
                v-if="index == ruleForm.ruleList.length - 1"
                class="el-icon-circle-plus-outline el-icon"
              ></i>
            </div>
          </el-form-item>
          <div class="align_ct" style="margin-top: 30px">
            <el-button type="primary" size="small">确定</el-button>
            <el-button type="default" size="small">取消</el-button>
          </div>
        </el-form>
      </template>
    </Dialog>
  </div>
</template>
<script>
import Dialog from '@/components/dialog/index';
import { talkType } from '@/config/index';
import { Tabs, Tools, Page, Action } from '@/components/table/index';
import ToolsForm from './toolsForm';

export default {
  components: {
    Tabs,
    Tools,
    Page,
    ToolsForm,
    Action,
    Dialog,
  },
  data () {
    return {
      ruleForm: {
        ruleList: [{ test: 'test' }]
      },
      talkType: talkType,
      isShow: false,
      tabList: [{
        name: '实时数据',
        value: 0
      }, {
        name: '通话记录',
        value: 1
      }, {
        name: '公众号货源',
        value: 2
      }],
      tableData: [{ test: 'test' }]
    }
  },
  methods: {
    autoRules () {
      this.isShow = true
    },
    plusItem () {
      this.ruleForm.ruleList.push({ test: 'test' })
    },
    delItem () {
      this.ruleForm.ruleList.pop()
    },
  }
}
</script>
<style lang="scss" scoped>
.main_box {
  .group {
    display: inline-block;
    .el-icon {
      font-size: 20px;
      vertical-align: middle;
    }
  }
}
</style>